<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="症状自查小程序 - 医护端管理系统">
    <meta name="keywords" content="医护端,诊断数据,数据可视化,CSV导入">
    <title>症状自查小程序 - 医护端</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <i class="fas fa-stethoscope"></i>
                <span>症状自查小程序</span>
            </div>
            <div class="nav-menu">
                <a href="index.html" class="nav-link">
                    <i class="fas fa-home"></i>
                    返回首页
                </a>
                <a href="patient.html" class="nav-link">
                    <i class="fas fa-user-injured"></i>
                    患者端
                </a>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="main-content">
        <!-- 工作台区域 -->
        <section id="dashboard" class="section active">
            <div class="section-header">
                <h2><i class="fas fa-tachometer-alt"></i> 医护工作台</h2>
                <p>诊断数据统计与分析</p>
            </div>
            
            <div class="dashboard-stats">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="total-patients">0</h3>
                        <p>总患者数</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-file-medical"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="total-diagnoses">0</h3>
                        <p>总诊断数</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="urgent-cases">0</h3>
                        <p>紧急病例</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="avg-severity">0</h3>
                        <p>平均严重度</p>
                    </div>
                </div>
            </div>

            <!-- 数据可视化图表 -->
            <div class="charts-container">
                <div class="chart-card">
                    <h3>疾病分布</h3>
                    <canvas id="diseaseChart" width="400" height="300"></canvas>
                </div>
                <div class="chart-card">
                    <h3>症状频率</h3>
                    <canvas id="symptomChart" width="400" height="300"></canvas>
                </div>
                <div class="chart-card">
                    <h3>严重程度分布</h3>
                    <canvas id="severityChart" width="400" height="300"></canvas>
                </div>
                <div class="chart-card">
                    <h3>时间趋势</h3>
                    <canvas id="trendChart" width="400" height="300"></canvas>
                </div>
            </div>
        </section>

        <!-- 患者管理区域 -->
        <section id="patient-management" class="section">
            <div class="section-header">
                <h2><i class="fas fa-user-injured"></i> 患者管理</h2>
                <p>查看和管理患者诊断记录</p>
            </div>
            
            <div class="patient-filters">
                <input type="text" id="patient-search" placeholder="搜索患者姓名或症状...">
                <select id="severity-filter">
                    <option value="">所有严重程度</option>
                    <option value="轻度">轻度</option>
                    <option value="中度">中度</option>
                    <option value="重度">重度</option>
                </select>
                <select id="urgency-filter">
                    <option value="">所有紧急程度</option>
                    <option value="非紧急">非紧急</option>
                    <option value="建议就医">建议就医</option>
                    <option value="紧急">紧急</option>
                </select>
            </div>
            
            <div class="patient-list">
                <table id="patients-table">
                    <thead>
                        <tr>
                            <th>患者ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>主要症状</th>
                            <th>诊断结果</th>
                            <th>严重程度</th>
                            <th>紧急程度</th>
                            <th>诊断时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="patients-tbody">
                        <!-- 患者数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 数据导入区域 -->
        <section id="data-import" class="section">
            <div class="section-header">
                <h2><i class="fas fa-file-import"></i> 数据导入</h2>
                <p>导入CSV文件进行数据分析</p>
            </div>
            
            <div class="import-container">
                <div class="import-card">
                    <h3>CSV文件导入</h3>
                    <p>支持导入患者诊断数据的CSV文件</p>
                    
                    <div class="file-upload-area">
                        <input type="file" id="csv-file" accept=".csv" style="display: none;">
                        <div class="upload-placeholder" id="upload-placeholder">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>点击选择CSV文件或拖拽文件到这里</p>
                            <small>支持格式：患者ID,姓名,年龄,症状,诊断结果,严重程度,紧急程度,诊断时间</small>
                        </div>
                        <div class="upload-preview" id="upload-preview" style="display: none;">
                            <i class="fas fa-file-csv"></i>
                            <p id="file-name"></p>
                            <button onclick="processCSV()" class="btn-primary">导入数据</button>
                            <button onclick="cancelUpload()" class="btn-secondary">取消</button>
                        </div>
                    </div>
                    
                    <div class="import-template">
                        <h4>CSV文件模板</h4>
                        <p>下载模板文件确保格式正确：</p>
                        <button onclick="downloadTemplate()" class="btn-outline">
                            <i class="fas fa-download"></i>
                            下载模板
                        </button>
                    </div>
                </div>
                
                <div class="import-results" id="import-results" style="display: none;">
                    <h3>导入结果</h3>
                    <div id="import-summary"></div>
                    <div id="import-errors"></div>
                </div>
            </div>
        </section>

        <!-- 诊断审核区域 -->
        <section id="diagnosis-review" class="section">
            <div class="section-header">
                <h2><i class="fas fa-check-double"></i> 诊断审核</h2>
                <p>审核AI诊断结果并提供专业意见</p>
            </div>
            
            <div class="review-list">
                <div class="review-item">
                    <div class="review-header">
                        <span class="patient-info">患者：张三 (ID: P001)</span>
                        <span class="diagnosis-date">2024-01-15 14:30</span>
                    </div>
                    <div class="review-content">
                        <div class="ai-diagnosis">
                            <h4>AI诊断结果</h4>
                            <p><strong>症状：</strong>头痛、发热、咳嗽</p>
                            <p><strong>可能疾病：</strong>普通感冒 (75%可能性)</p>
                            <p><strong>严重程度：</strong>轻度</p>
                            <p><strong>紧急程度：</strong>非紧急</p>
                        </div>
                        <div class="doctor-review">
                            <h4>医生审核意见</h4>
                            <textarea placeholder="请输入您的专业意见..." rows="3"></textarea>
                            <div class="review-actions">
                                <button class="btn-success">通过审核</button>
                                <button class="btn-warning">需要修改</button>
                                <button class="btn-danger">拒绝诊断</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 医生中心区域 -->
        <section id="doctor-center" class="section">
            <div class="section-header">
                <h2><i class="fas fa-user-md"></i> 医生中心</h2>
                <p>个人设置和工作统计</p>
            </div>
            
            <div class="doctor-profile">
                <div class="profile-card">
                    <div class="profile-header">
                        <div class="profile-avatar">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="profile-info">
                            <h3>李医生</h3>
                            <p>内科主治医师</p>
                            <span class="badge">在职</span>
                        </div>
                    </div>
                    
                    <div class="profile-stats">
                        <div class="stat-item">
                            <span class="stat-label">本月诊断</span>
                            <span class="stat-value">128</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">审核通过率</span>
                            <span class="stat-value">92%</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">平均响应时间</span>
                            <span class="stat-value">2.3h</span>
                        </div>
                    </div>
                </div>
                
                <div class="settings-card">
                    <h3>系统设置</h3>
                    <div class="setting-item">
                        <label>通知设置</label>
                        <div class="toggle-switch">
                            <input type="checkbox" id="notifications" checked>
                            <span class="slider"></span>
                        </div>
                    </div>
                    <div class="setting-item">
                        <label>自动保存间隔</label>
                        <select>
                            <option>5分钟</option>
                            <option selected>10分钟</option>
                            <option>15分钟</option>
                        </select>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <button class="nav-btn active" onclick="showSection('dashboard')">
            <i class="fas fa-tachometer-alt"></i>
            <span>工作台</span>
        </button>
        <button class="nav-btn" onclick="showSection('patient-management')">
            <i class="fas fa-user-injured"></i>
            <span>患者管理</span>
        </button>
        <button class="nav-btn" onclick="showSection('data-import')">
            <i class="fas fa-file-import"></i>
            <span>数据导入</span>
        </button>
        <button class="nav-btn" onclick="showSection('diagnosis-review')">
            <i class="fas fa-check-double"></i>
            <span>诊断审核</span>
        </button>
        <button class="nav-btn" onclick="showSection('doctor-center')">
            <i class="fas fa-user-md"></i>
            <span>医生中心</span>
        </button>
    </nav>

    <script src="app.js"></script>
    <script src="doctor.js"></script>
</body>
</html>